<html>
<head>
<meta charset="UTF-8">
<title>HTML5+CSS3城市场景动画</title>
<style>
body {margin:0; padding:0; background-color:#ddf5f7;}
/*-------- 天空背景以及动画 --------*/
.stage {
	position: relative;
	overflow: hidden;
	height: 600px;
	background: #ddf5f7;
	animation:tiankong 25s infinite linear alternate;
}
@keyframes tiankong{
	0%{
		background: #ddf5f7;
	}
	25%{
		background: #d4d4d4;
	}
	50%{
		background: #cccccc;
	}
	75%{
		background: #919191;
	}
	100%{
		background: #000000;
	}
}
@-webkit-keyframes  tiankong{
	0%{
		background: #ddf5f7;
	}
	25%{
		background: #d4d4d4;
	}
	50%{
		background: #cccccc;
	}
	75%{
		background: #919191;
	}
	100%{
		background: #000000;
	}
}



/*-------- 气球以及动画 --------*/
.balloon {
	position: absolute;
	z-index: 3;
	top: 5%;
	background: url(images/balloon.png) no-repeat no-repeat center;
	height: 227px;
	width: 157px;
	animation:qiqiu 30s infinite ease alternate;
}
@keyframes qiqiu{
	0%{
		right: -157px;
		transform: rotate(0deg);
	}
	25%{
		right: 25%;
		transform: rotate(30deg);
	}
	50%{
		right: 50%;
		transform: rotate(60deg);
	}
	75%{
		right: 75%;
		transform: rotate(30deg);
	}
	100%{
		right: 100%;
		transform: rotate(0deg);
	}
}
@-webkit-keyframes  qiqiu{
	0%{
		right: -157px;
		transform: rotate(0deg);
	}
	25%{
		right: 25%;
		transform: rotate(30deg);
	}
	50%{
		right: 50px;
		transform: rotate(60deg);
	}
	75%{
		right: 75px;
		transform: rotate(30deg);
	}
	100%{
		right: 100%;
		transform: rotate(0deg);
	}
}


/*-------- 城市场景图片 --------*/
.skyline {
	position: absolute;
	z-index: 5;
	width: 100%;
	bottom: 26%;
	background: url(images/skyline.png) repeat no-repeat;
	height: 147px;
}
.beans {
	position: absolute;
	z-index: 4;
	height: 201px;
	width: 88px;
	bottom: 30%;
	left: 50%;
	background: url(images/beans.png) no-repeat no-repeat;
}
.ground {
	position: absolute;
	width: 100%;
	bottom: 0;
}
.ground.front {
	z-index: 30;
	background: url(images/groundFront.png) repeat no-repeat center;
	height: 301px;
}
.ground.mid {
	z-index: 20;
	background: url(images/groundMid.png) repeat no-repeat;
	height: 299px;
}
.ground.back {
	z-index: 10;
	background: url(images/groundBack.png) repeat no-repeat center;
	height: 281px;
}
.dowEventCenter {
	position: absolute;
	z-index: 12;
	bottom: 20%;
	left: 5%;
	background: url(images/dowEventCenter.png) no-repeat no-repeat center;
	height: 236px;
	width: 524px;
}
.planetarium {
	position: absolute;
	z-index: 12;
	bottom: 18%;
	right: 10%;
	background: url(images/Planetarium.png) no-repeat no-repeat center;
	height: 285px;
	width: 347px;
}
.friendshipShell {
	position: absolute;
	z-index: 21;
	bottom: 18%;
	left: 20%;
	background: url(images/friendshipShell.png) no-repeat no-repeat center;
	height: 370px;
	width: 231px;
}
.glockenspiel {
	position: absolute;
	z-index: 11;
	bottom: 26%;
	right: 50%;
	background: url(images/Glockenspiel.png) no-repeat no-repeat center;
	height: 263px;
	width: 137px;
}
/*-------- 云朵以及动画 --------*/
	.cloud{
		position: absolute;
	}
	 .cloudLarge{
		z-index: 1;
		top: 1%;
		right: 15%;
		width: 302px;
		height: 169px;
		background: url(images/cloudLarge.png) no-repeat no-repeat center;
		 animation: cloudLarge 90s infinite;
	}
@keyframes  cloudLarge{
	from{
		right: -15%;
	}
	to{
		right:100%
	}
}
@-webkit-keyframes  cloudLarge{
	from{
		left: -15%;
	}
	to{
		left:100%
	}
}
	 .cloudMedium{
		z-index: 2;
		width: 159px;
		height: 92px;
		background: url(images/cloudMedium.png) no-repeat no-repeat center;
		top: 25%;
		left: 20%;
		 animation: cloudMedium 60s infinite;
	}
@keyframes  cloudMedium{
	from{
		left: -15%;
	}
	to{
		left:100%
	}
}
@-webkit-keyframes  cloudMedium{
	from{
		left: -15%;
	}
	to{
		left:100%
	}
}
	 .cloudSmall{
		z-index: 3;
		width: 89px;
		height: 50px;
		background: url(images/cloudSmall.png) no-repeat no-repeat center;
		top: 10%;
		right: 30%;
		 animation: cloudSmall 30s infinite;
	}
@keyframes  cloudSmall{
	from{
		left: -15%;
	}
	to{
		left:100%
	}
}
@-webkit-keyframes  cloudSmall{
	from{
		left: -15%;
	}
	to{
		left:100%
	}
}

/*-------- 太阳以及动画 --------*/
.rotation {
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 50%;
	margin: -350px 0 0 -350px;
	height: 700px;
	width: 700px;
	transform: rotate(90deg);
	animation: rotation 50s infinite linear;
}
@-webkit-keyframes rotation {
	0% {
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
	}
	100% {
		transform: rotate(405deg);
		-webkit-transform: rotate(405deg);
	}
}
@keyframes rotation {
	0% {
		transform: rotate(45deg);
	}
	100% {
		transform: rotate(405deg);
	}
}

.sun, .moon {
	position: absolute;
	height: 145px;
	width: 145px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
.sun {
	top: 0;
	left: 0;
	background: yellow;
}
.moon {
	bottom: 0;
	right: 0;
	background: black;
}

</style>
</head>
<body>

<section>
  <div class="stage">
    <div class="skyline"></div>
    <div class="beans"></div>
    <div class="ground back"></div>
    <div class="ground mid"></div>
    <div class="ground front"></div>
    <div class="dowEventCenter"></div>
    <div class="planetarium"></div>
    <div class="friendshipShell"></div>
    <div class="glockenspiel"></div>
		<!--汽球-->
		<div class="balloon"></div>
	  <!-- 云朵-->
	  <div class="cloud cloudLarge"></div>
	  <div class="cloud cloudMedium"></div>
	  <div class="cloud cloudSmall"></div>
	  <!-- 太阳-->
	  <div class="rotation">
		  <div class="sun"></div>
		  <div class="moon"></div>
	  </div>
  </div>
</section>
</body>
</html>